<template>
  <el-dialog
    v-model="dialog.visible"
    title="接口请求记录详情"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form ref="dataForm" :model="entity" label-suffix="：">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="authorization">
            <span>{{ entity.authorization }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="请求地址">
            <span>{{ entity.requestUri }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="请求参数">
            <vue-json-pretty v-if="parameters" :data="parameters" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="响应结果">
            <vue-json-pretty v-if="jsonResult" :data="jsonResult" />
            <span v-else class="w-b-b-w">{{ entity.jsonResult }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
    </template>
  </el-dialog>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { getDetail } from '@/api/log/handlerLog'

export default {
  name: 'HandlerView',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      entity: {},
    }
  },
  computed: {
    parameters() {
      return JSON.parse(this.entity.parameters ? this.entity.parameters : '{}')
    },
    jsonResult() {
      try {
        return JSON.parse(this.entity.jsonResult)
      } catch (e) {
        return null
      }
    },
  },
  components: {
    VueJsonPretty,
  },
  methods: {
    openHandler() {
      getDetail(this.dialog.entity.id).then((res) => {
        this.entity = res.data.data
      })
    },
    closeHandler() {
      this.entity = {}
      this.$refs.dataForm.clearValidate()
    },
  },
}
</script>
